<template>
  <avue-crud :option="option"
              :data="data"
              ref="crud"
              :page="page"
              @search-change="searchChange"
              @search-reset="searchReset"
              @selection-change="selectionChange"
              @current-change="currentChange"
              @size-change="sizeChange"
              @on-load="onLoad">
  </avue-crud>
</template>

<script>
  import {
    getProvince,
    getCity
  } from "@/api/system/region";
  export default {
    components: {
    },
    props: {
      pid: ''
    },
    data(){
      return{
        countryId:'CN',
        provinceId:'',
        query:{},
        data:[],
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        option:{
        searchMenuSpan:8,
          tip: false,
          border: true,
          menu:false,
          addBtn:false,
          size:'mini',
          refreshBtn:false,
          columnBtn:false,
          column:[
            {
              label: "所属省份",
              prop: "provinceId",
              dicData: [],
              props: {
                label: "province",
                value: "id"
              },
              type: "select"
            },
            {
              label: "编码",
              prop: "id"
            },
            {
              label: "城市",
              prop: "city",
              search: true
            }
          ]
        }
      }
    },
    mounted() {
      getProvince(1, 0, {}).then(res => {
        this.findObject(this.option.column,'provinceId').dicData = res.data.data;
      });
    },
    methods:{
      onLoad(page, params = {}) {
        getCity(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data;
          this.data = data.data;
          this.page.total = data.remark;
        });
      },
      searchReset() {
        this.query={};
        this.page.currentPage=1;
        this.onLoad(this.page);
      },
      searchChange(params,done) {
        this.page.currentPage=1;
        this.query=params;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      }
    },
    watch: {
      pid(val) {
        if (val !== undefined && val !== null && val!=="") {
          this.page.currentPage=1;
          this.query.provinceId=val;
          this.onLoad(this.page);
        }
      }
    }
  };
</script>

<style>

</style>
